<script setup>
import { ref } from 'vue'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'

const dropdownVisible = ref(false)
const toggleDropdown = () => {
  dropdownVisible.value = !dropdownVisible.value
}

const goods = [
  { label: '畅销', icon: new URL('@/assets/aimatch-value-1.png', import.meta.url).href, value: '12款' },
  { label: '滞销', icon: new URL('@/assets/aimatch-value-2.png', import.meta.url).href, value: '5款' },
  { label: '平销', icon: new URL('@/assets/aimatch-value-3.png', import.meta.url).href, value: '15款' }
]

const people = [
  { label: '重要价值', icon: new URL('@/assets/aimatch-value-4.png', import.meta.url).href, value: '2000人' },
  { label: '重要挽留', icon: new URL('@/assets/aimatch-value-5.png', import.meta.url).href, value: '1300人' },
  { label: '一般价值', icon: new URL('@/assets/aimatch-value-6.png', import.meta.url).href, value: '1800人' },
  { label: '一般挽留', icon: new URL('@/assets/aimatch-value-7.png', import.meta.url).href, value: '821人' }
]

const viewDetails = () => {
  console.log('查看方案明细 clicked')
}
</script>

<template>
  <div class="aimatch-header">
    <div class="aimatch-header-tittle">
      <img src="@/assets/aimatch.png" alt="" />
      <span class="tittle">AI匹配</span>
      <span class="tittle-content">-智能生成匹配方案</span>
    </div>
    <div class="aimatch-header-button">
      <div><span>按店推荐</span></div>
    </div>
  </div>

  <div class="aimatch-body">
    <div class="aimatch-body-content">
      <div class="aimatch-content-tittle">
        <img src="@/assets/check.png" alt="" />
        <span>已使用ICF算法为23家门店生成人货匹配方案</span>
        <el-button type="warning" size="small" round @click.stop="toggleDropdown">
          更换算法
          <el-icon class="el-icon-arrow-down"><ArrowDown /></el-icon>
        </el-button>

        <div v-if="dropdownVisible" class="dropdown">
          <div class="dropdown-header">
            <div class="dropdown-header-tittle"><span>人货匹配算法</span></div>
            <div class="dropdown-header-content">
              <div><span>UCF-从人找人再找货</span></div>
              <div><span>UCF-从货找人再找货</span></div>
            </div>
          </div>
          <div class="dropdown-divider"></div>
          <div class="dropdown-body">
            <div>从标签找标签</div>
          </div>
        </div>
      </div>

      <div class="aimatch-content-suggest">
        <div class="aimatch-suggest-goods">
          <div class="aimatch-goods-tittle">
            <img src="@/assets/check.png" alt="" />
            <span>推荐38款商品（1.344件库存）</span>
          </div>
          <div class="aimatch-goods-data">
            <div class="aimatch-goods" v-for="item in goods" :key="item.label">
              <span class="aimatch-data-tittle">{{ item.label }}</span>
              <img :src="item.icon" alt="" />
              <span class="aimatch-data-value">{{ item.value }}</span>
            </div>
          </div>
        </div>

        <div class="aimatch-suggest-people">
          <div class="aimatch-people-tittle">
            <span>推荐6,921人</span>
          </div>
          <div class="aimatch-people-data">
            <div class="aimatch-people" v-for="item in people" :key="item.label">
              <span class="aimatch-data-tittle">{{ item.label }}</span>
              <img :src="item.icon" alt="" />
              <span class="aimatch-data-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="aimatch-body-button">
      <el-button type="warning" size="small" round @click="viewDetails">
        查看方案明细
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.aimatch-header{
  flex: 2;
  display: flex;
  .aimatch-header-tittle{ 
    flex: 3;
    margin-left: 10px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img{
      width: 25px;
      height: auto;
    }
  }
  .aimatch-header-button{
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    div{
      display: flex;
      text-align: center;
      span{
        height: 40px;
        width: 60px;
        line-height: 20px;
        background-image: url('@/assets/矩形 13.png');
        background-size: contain;
        background-repeat: no-repeat;
        align-items: center;
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        margin-left: 70px;
      }
    }
  }
}
.aimatch-body{
  flex: 9;
  display: flex;
  flex-direction: column;
  .aimatch-body-content{
    flex: 4;
    display: flex;
    flex-direction: column;
    .aimatch-content-tittle{
      flex: 1;
      margin-left: 30px;
      margin-top: 8px;
      position: relative;
      display: flex;
      img{
        height: 13px;
        width: auto;
      }
      span{
        color: rgba(10, 31, 55, 0.6);
        font-size: 12px;
        margin-left: 8px;
      }
      //下拉框
      .dropdown {
        position: absolute;
        top: 100%;
        left: 220px;
        width: 150px;
        height: 150px;
        background: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        border-radius: 4px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        .dropdown-header {
            flex: 3;
            padding: 8px 12px;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            flex-direction: column;
            .dropdown-header-tittle{ 
              flex: 1;
            }
            .dropdown-header-tittle span{
              justify-content: center;
              display: flex;
              color: black;
              font-size: 12px;
            }
            .dropdown-header-content{
              flex: 2;
              display: flex;
              flex-direction: column;
              div{
                flex: 1;
                span{
                  color: rgba(217, 217, 217, 1);
                  margin-top: 11px;
                  font-size: 12px;
                }
              }
            }
        }
        .dropdown-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            color: rgba(217, 217, 217, 1);
            font-size: 12px;
            padding: 8px 12px;
            cursor: pointer;
        }
        .dropdown-divider{
            height: 1px;
            background-color: rgba(217, 217, 217, 1);
            margin: 4px 0;
            width: 80%;
            margin-left: 10%;
        }
        .dropdown-header:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .aimatch-content-suggest{
      flex: 4;
      display: flex;
      .aimatch-suggest-goods{
         flex: 1;
         display: flex;
         flex-direction: column;
         margin-left: 30px;
         .aimatch-goods-tittle{
           flex: 1;
           img{
              height: 13px;
              width: auto;
            }
            span{
              color: rgba(10, 31, 55, 0.6);
              font-size: 12px;
              margin-left: 8px;
            }
         }
         .aimatch-goods-data{
           flex: 4;
           display: flex;
           flex-direction: column;
           .aimatch-goods{
            flex: 1;
            .aimatch-data-tittle{
              color: rgba(10, 31, 55, 0.6);
              font-size: 12px;
              margin-left: 8px;
            }
            img{
              height: 10px;
              width: auto;
              margin-left: 5px;
            }
            .aimatch-data-value{
              font-size: 12px;
              margin-left: 5px;
            }
           }
         }
      }
      .aimatch-suggest-people{
         flex: 1;
         display: flex;
         flex-direction: column;
         .aimatch-people-tittle{
          flex: 1;  
          span{
              color: rgba(10, 31, 55, 0.6);
              font-size: 12px;
            }
        }
        .aimatch-people-data{
          flex: 4;
          display: flex;
          flex-direction: column;
          .aimatch-people{
            flex: 1;
            .aimatch-data-tittle{
              color: rgba(10, 31, 55, 0.6);
              font-size: 12px;
              margin-left: 8px;
            }
            img{
              height: 10px;
              width: auto;
              margin-left: 5px;
            }
            .aimatch-data-value{
              font-size: 12px;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .aimatch-body-button{
    flex: 1;
    margin-left: 40%;
  }
}
</style>
